<!-- 新增输入框 -->
<template>
  <div class="input-wrap">
    <input
      v-model="content"
      type="text"
      placeholder="增加待购物品，按回车键确认"
      @keyup.enter="enterHandler"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, PropType } from 'vue'
import { Item } from '@/types/item'
export default defineComponent({
  name: 'NewInput',
  props: {
    addList: {
      type: Function as PropType<(item: Item) => void>,
      required: true
    }
  },
  setup(props) {
    let content = ref('')

    const enterHandler = () => {
      if (content.value) {
        const item = {
          id: Date.now(),
          content: content.value,
          purchased: false
        }
        props.addList(item)
        content.value = ''
      }
    }
    return { enterHandler, content }
  }
})
</script>

<style scoped lang="scss">
.input-wrap {
  height: 32px;
  border-radius: 15px;
  background-color: #fff3ee;
  overflow: hidden;
  padding: 0 10px;
}
input {
  width: 100%;
  height: 30px;
  border: none;
  color: #fcb7a0;
  background-color: #fff3ee;
  font-size: 14px;
  font-weight: bold;
}
input::-webkit-input-placeholder {
  color: #fdcdb5;
}
input:focus {
  outline: none;
}
</style>
